﻿Ext.onReady(function () {

    Ext.QuickTips.init();

    var xg = Ext.grid;
    var fm = Ext.form;
    // shared reader
    var reader = new Ext.data.JsonReader(
        {
            root: 'Root',
            fields: [
                       { name: 'Name' },
                       { name: 'Factor', type: 'float' },
                       { name: 'Age', type: 'float' }
                    ]
        });
    ////////////////////////////////////////////////////////////////////////////////////////
    // Grid 4
    ////////////////////////////////////////////////////////////////////////////////////////
    var grid4 = new xg.GridPanel({
        id: 'button-grid',
        store: new Ext.data.Store({
            reader: reader,
            autoLoad: true,
            proxy: new Ext.data.HttpProxy({
                type: 'ajax',
                url: 'Peoples/GetViewPeopleList' // see options parameter for Ext.Ajax.request
            })
        }),
        cm: new Ext.grid.ColumnModel({
            columns: [
            { id: 'name', header: "Name", width: 40, sortable: true, dataIndex: 'Name' },
            { header: "Factor", width: 20, sortable: true, dataIndex: 'Factor' },
            { header: "Age", width: 20, sortable: true, dataIndex: 'Age' }
           ]
        }),
        viewConfig: {
            forceFit: true
        },
        columnLines: true,
        buttonAlign: 'center',

        // inline toolbars
        tbar: { items: [{
            xtype: 'button',
            text: 'Filtrate',
            tooltip: 'filtrate data',
            iconCls: 'add',
            handler: function () {
                var itemstb = grid4.getTopToolbar().items.items;
                var mintb = itemstb[0];
                var maxtb = itemstb[1];
                for (var i = 0; i < itemstb.length; i++) {
                    if (itemstb[i].id == 'minFactorTbx')
                        mintb = itemstb[i];
                    if (itemstb[i].id == 'maxFactorTbx')
                        maxtb = itemstb[i];
                }
                var isValMax = maxtb.validate();
                var isValMin = mintb.validate();
                if (isValMax && isValMin) {
                    var min = mintb.getValue();
                    var max = maxtb.getValue();
                    grid4.getStore().filterBy(function (record) {
                        if (record.data.Factor > min && record.data.Factor < max)
                            return true;
                        return false;
                    });
                }
            }
        }, '-',
            {
                xtype: 'tbtext',
                text: 'minFactor'
            },
            {
                xtype: 'textfield',
                id: 'minFactorTbx',
                fieldLabel: 'min Factor',
                validator: validatetb
            }, ' ', ' ',
        {
            xtype: 'tbtext',
            text: 'maxFactor'
        },
            {
                xtype: 'textfield',
                id: 'maxFactorTbx',
                fieldLabel: 'max Factor',
                validator: validatetb
            }

        ]
        },

        width: 600,
        height: 300,
        frame: true,
        collapsible: true,
        title: 'Peoples view panel',
        iconCls: 'icon-grid',
        renderTo: document.getElementById("content")
    });

    function validatetb(value) {
        var val = Number(value);
        if (isNaN(val)) return false;
        if (val < 0 || val > 1) return false;
        return true;
    }

});


